<template>
  <div class="person">
    <div>
      <ul>
        <li v-for="person in personList" :key="person.id">
          {{ person.name }} -- {{ person.age }}</li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}


</script>

<script lang="ts" setup>
import { ref, reactive, withDefaults } from 'vue'
// 数据
import { type PersonInter, type Persons } from '@/types/index';

// defineProps(['a'])
// 只接收 personList  不分类型
//  defineProps(['personList'])

// 0. 接受 父组件传来的属性值,同时保存起来, 没有对参数做任何限制
// let x = defineProps(['personList'])
// console.log(x.a, x.b)

// 1.可以传入一个泛型 来进行约束  限制类型  必传参数 personList 
// defineProps<{personList: Persons}>()




// 2.  可选传入参数 添加？ 即可
// defineProps<{personList?: Persons}>()


// 3. personList 可选， 如果不传， 传入 默认值
withDefaults(defineProps<{ personList?: Persons }>(), {
  personList: () => [{ id: 'frankso1', name: 'frank1', age: 10 }]
}
)


</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  padding: 10px;
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>